<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between">
                <div>
                    <el-input placeholder="请输入招聘计划名称进行搜索，可以直接回车搜索..." prefix-icon="el-icon-search"
                              clearable
                              @clear="initEnlist"
                              style="width: 350px;margin-right: 10px" v-model="keyword"
                              @keydown.enter.native="initEnlist" :disabled="showAdvanceSearchView"></el-input>
                    <el-button icon="el-icon-search" type="primary" @click="initEnlist" :disabled="showAdvanceSearchView">
                        搜索
                    </el-button>
                    <el-button type="primary" @click="showAdvanceSearchView = !showAdvanceSearchView">
                        <i :class="showAdvanceSearchView?'fa fa-angle-double-up':'fa fa-angle-double-down'"
                           aria-hidden="true"></i>
                        高级搜索
                    </el-button>
                </div>
                <div>
                    <el-button type="success" @click="exportData" icon="el-icon-download">
                        导出数据
                    </el-button>
                </div>
            </div>
            <transition name="slide-fade">
                <div v-show="showAdvanceSearchView"
                     style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px;">
                    <el-row style="margin-top: 10px">
                        <el-col :span="6">
                            所属部门:
                            <el-popover
                                    placement="right"
                                    title="请选择部门"
                                    width="200"
                                    trigger="manual"
                                    v-model="popVisible2">
                                <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                         @node-click="searchViewHandleNodeClick"></el-tree>
                                <div slot="reference"
                                     style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                                     @click="showDepView2">{{inputDepName}}
                                </div>
                            </el-popover>
                        </el-col>
                        <el-col :span="5" :offset="4">
                            <el-button size="mini">取消</el-button>
                            <el-button size="mini" icon="el-icon-search" type="primary" @click="initEnlist('advanced')">搜索</el-button>
                        </el-col>
                    </el-row>
                </div>
            </transition>
        </div>

        <div style="margin-top: 10px">
            <el-table
                    :data="enlists"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        type="selection"
                        width="70">
                </el-table-column>
                <el-table-column
                        fixed="left"
                        prop="encruitName"
                        align="center"
                        label="计划名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="encruitRequire"
                        label="技术要求"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="encruitCount"
                        label="招聘人数"
                        align="center"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="applyName"
                        width="120"
                        align="center"
                        label="申请人">
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        width="120"
                        align="center"
                        label="所属部门">
                </el-table-column>
                <el-table-column
                        prop="enrollStudent"
                        width="160"
                        align="center"
                        label="已报名的学生">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        width="120"
                        align="center"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        prop="updateDate"
                        width="120"
                        align="center"
                        label="更新时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="120"
                        label="是否发布">
                    <template slot-scope="scope" style="align-items: center">
                        <el-tag size="small" type="success" v-if="scope.row.enabled">已发布</el-tag>
                        <el-tag size="small" type="danger" v-else>未发布</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="110"
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showEnterView(scope.row)" style="padding: 3px" size="large" type="primary">立即报名</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="80%">
                <div>
                    <el-form :model="enlist" :rules="rules" ref="enlistForm">
                        <el-row>
                            <el-col :span="6" style="margin-left: 100px">
                                <el-form-item label="计划名称:" prop="encruitName">
                                    {{enlist.encruitName}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="所属部门:" prop="departmentId">
                                    {{enlist.department.name}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="技术要求:" prop="encruitRequire">
                                 {{enlist.encruitRequire}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6" style="margin-left: 100px">
                                <el-form-item label="招聘人数:" prop="encruitCount">
                                   {{enlist.encruitCount}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="申请人:" prop="applyName">
                                    {{enlist.applyName}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24" style="margin-left: 100px">
                                <el-form-item label="填写姓名:" prop="enrollStudent">
                                    <el-input size="mini" style="width: 600px"
                                              clearable
                                              v-model="enlist.enrollStudent" placeholder="填写姓名">
                                        <template slot="prepend">{{currentName}}</template>
                                    </el-input>
                                    <el-button @click="verifyStudentName" type="primary" style="margin-left: 2px; position: absolute" size="mini">校验</el-button>
                                 </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doEnterEnlist" v-show="isCantConfirm === true">确 定</el-button>
              </span>
            </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "enlistBasic",
        data() {
            return {
                currentName: '',
                studentNameArray: '',
                isCantConfirm: false,
                arr: [],
                searchValue: {
                    departmentId: null,
                },
                title: '',
                importDataBtnText: '导入数据',
                importDataBtnIcon: 'el-icon-upload2',
                importDataDisabled: false,
                showAdvanceSearchView: false,
                allDeps: [],
                enlists: [],
                loading: false,
                popVisible: false,
                popVisible2: false,
                dialogVisible: false,
                total: 0,
                page: 1,
                keyword: '',
                size: 10,
                inputDepName: '所属部门',
                enlist: {
                    enrollStudent: '',
                    department: {
                        id: null,
                        name: null
                    },
                    encruitName: "tlgen",
                    encruitRequire: "男",
                    encruitCount: 4,
                    applyName: "tlgen",
                    createDate: "2020-12-12",
                    updateDate:"2020-6-12",
                    enabled: false,
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                rules: {
                    encruitName: [{required: true, message: '请输入招聘计划名', trigger: 'blur'}],
                    encruitRequire: [{required: true, message: '请输入技术要求', trigger: 'blur'}],
                    encruitCount: [{required: true, message: '请输入招聘人数', trigger: 'blur'}],
                    departmentId: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
                    applyName: [{required: true, message: '请输入申请人姓名', trigger: 'blur'}],
                    enabled: [{required: true, message: '请输入发布状态', trigger: 'blur'}],
                    enrollStudent: [{required: true, message: '请填写姓名', trigger: 'blur'}],
                }
            }
        },
        mounted() {
            this.initEnlist();
            this.initData();
        },
        methods: {
            showEnterView(data) {
                this.title = '学生填写报名信息';
                this.enlist = data;
                this.dialogVisible = true;
                this.currentName = data.enrollStudent
                this.inputDepName = data.department.name; //需要单独处理
            },
            searchViewHandleNodeClick(data) {
                this.inputDepName = data.name;
                this.searchValue.departmentId = data.id;
                this.popVisible2 = !this.popVisible2
            },
            onError(err, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
            },
            onSuccess(resonse, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
                this.initEnlist();
            },
            beforeUpload() {
                this.importDataBtnText = '正在导入';
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataDisabled = true;
            },
            exportData() {
                window.open('/technology/enlist/export', '_parent');
            },
            emptyEnlist() {
                this.enlist = {
                    encruitName: "",
                    encruitRequire: "",
                    encruitCount: "",
                    departmentId: null,
                    applyName: "",
                    enabled: null,
                }
                this.inputDepName = '';
            },
            deleteEnlist(data) {
                this.$confirm('此操作将永久删除【' + data.encruitName + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/technology/enlist/" + data.id).then(res => {
                        if (res) {
                            this.initEnlist();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //判断学生是否注册
            verifyStudentName() {
                this.$refs['enlistForm'].validate(valid => {
                    if (valid) {
                        this.getRequest('/student/registry/').then(res => {
                            //遍历
                            const dataArray = res.data
                            let arr = []
                            for (let i in dataArray) {
                                arr.push(dataArray[i].studentName)
                            }
                            this.arr = arr
                            if (this.arr.includes(this.enlist.enrollStudent)) {
                                this.$message.success('校验通过!')
                                this.isCantConfirm = true
                            } else {
                                this.$message.error('该学生没有注册!')
                                this.isCantConfirm = false
                                return false
                            }
                        })
                    }
                })
            },

            doEnterEnlist() {
                if (this.enlist.id) {
                    this.$refs['enlistForm'].validate(valid => {
                        if (valid) {
                            //手动将前缀一起赋值
                            this.enlist.enrollStudent = this.currentName + '、' +  this.enlist.enrollStudent
                            this.putRequest("/technology/enlist/", this.enlist).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.initEnlist();
                                }
                            })
                        }
                    });
                } else {
                    this.$refs['enlistForm'].validate(valid => {
                        if (valid) {
                            this.postRequest("/technology/enlist/", this.enlist).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.initEnlist();
                                }
                            })
                        }
                    });
                }
            },
            handleNodeClick(data) {
                this.inputDepName = data.name;
                this.enlist.departmentId = data.id;
                this.popVisible = !this.popVisible
            },
            showDepView() {
                this.popVisible = !this.popVisible
            },
            showDepView2() {
                this.popVisible2 = !this.popVisible2
            },
            initData() {
                /*有时未及时更新 可以把判断直接去掉重新获取新的数据 再存入缓存 */
                if (!window.sessionStorage.getItem("deps")) {
                    this.getRequest('/technology/enlist/deps').then(res => {
                        if (res) {
                            this.allDeps = res;
                            window.sessionStorage.setItem("deps", JSON.stringify(res));
                        }
                    })
                } else {
                    this.allDeps = JSON.parse(window.sessionStorage.getItem("deps"));
                }
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initEnlist();
            },
            currentChange(currentPage) {
                this.page = currentPage;
                this.initEnlist();
            },
            showAddEnlistView() {
                this.emptyEnlist();
                this.title = '添加招聘计划信息';
                this.dialogVisible = true;
            },
            initEnlist(type) {
                this.loading = true;
                let url = '/technology/enlist/?page=' + this.page + '&size=' + this.size;
                if (type && type === 'advanced') {
                    if (this.searchValue.departmentId) {
                        url += '&departmentId=' + this.searchValue.departmentId;
                    }
                } else {
                    url += "&encruitName=" + this.keyword;
                    console.log(url)
                }
                this.getRequest(url).then(res => {
                    this.loading = false;
                    if (res) {
                        this.enlists = res.data;
                        this.total = res.total;
                    }
                });
            },
        }
    }
</script>

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }

    #el-upload-style{
        height: 36px;
    }
</style>
